<template>
    <div ref="chartRef" :style="{ height: '480px', width: '100%' }"></div>
</template>

<script lang="ts" setup>
import { ref, Ref, watch, onMounted } from 'vue'
import { useECharts } from '/@/hooks/web/useECharts'
import { countGrade } from './BaomingStatistics.api'

const chartRef = ref<HTMLDivElement | null>(null)
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>)

onMounted(() => {
    initData()
})

/**
 * 初始化数据
 */
async function initData() {
    countGrade().then(res => {
        console.log(res.data)

        let data = [];
        res.data.forEach(item => {
            data.push({
                value: item.num,
                name: item.gradeName
            });
        });


        setOptions({
            tooltip: {
                trigger: 'item'
            },
            legend: {
                // orient: 'vertical',
                left: 'left'
            },
            grid: { left: '1%', right: '1%', top: '2  %', bottom: 0, containLabel: true },
            series: [
                {
                    name: '数量',
                    type: 'pie',
                    radius: '50%',
                    data: data,
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                },
            ],
        })

    })
}
</script>